<template>
  <div class="dialog">
    <el-dialog width="70%" :title="title" :visible="true" :close-on-click-modal="false" :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="秒杀活动名称：" prop="title">
          <el-col :span="12">
            <el-input v-model="form.title" placeholder="请输入" clearable :disabled="disabled" />
          </el-col>
        </el-form-item>
        <el-form-item label="是否连续：" prop="title">
          <el-col :span="12">
            <el-radio-group v-model="form.isBigHome">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="秒杀活动时间：" prop="title">
          <el-col :span="12">
            <el-time-picker
              v-model="form.value1"
              is-range
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="秒杀批次时间：" prop="title">
          <el-col :span="12">
            <el-date-picker
              v-model="form.timeList"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="活动规则：" prop="title">
          <el-col :span="24">
            <el-input v-model="form.title" type="textarea" rows="5" placeholder="请输入" clearable :disabled="disabled" />
          </el-col>
        </el-form-item>
      </el-form>
      <div v-if="type !== 'detail'" slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addNotice, editNotice } from '@/api/content'
export default {
  name: 'AddSecKill',
  components: { },
  props: {
    type: {
      type: String,
      default: 'add' // add:新增  detail:详情  edit:编辑
    },
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      loading: false,
      form: {
        title: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入公告标题', trigger: ['change', 'blur'] }],
        content: [{ required: true, message: '请输入公告内容', trigger: ['change'] }]
      }
    }
  },

  computed: {
    title() {
      if (this.type === 'detail') {
        return '公告详情'
      } else if (this.type === 'edit') {
        return '编辑公告'
      } else {
        return '新增公告'
      }
    },
    disabled() {
      return this.type === 'detail'
    }
  },

  created() {
    if (this.type !== 'add') {
      const { title, content } = this.formDetail
      this.form = {
        title,
        content
      }
    }
  },

  methods: {

    // 取消
    close() {
      this.$emit('close')
    },

    // 确定
    confirm() {
      if (this.type === 'add') {
        this.addHandle()
      } else {
        this.editHandle()
      }
    },

    // 新增
    addHandle() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const data = {
            ...this.form
          }
          addNotice(data).then(() => {
            this.$message.success('新增成功')
            this.loading = false
            this.$emit('confirm')
            this.close()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },

    // 编辑
    editHandle() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const data = {
            ...this.form,
            id: this.formDetail.id
          }
          editNotice(data).then(() => {
            this.$message.success('编辑成功')
            this.loading = false
            this.$emit('confirm')
            this.close()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
